<html ng-controller="appController">
<head>
    <link rel="stylesheet" type="text/css" href="[[BASE_PATH]]css/styles.css">
    <script src="[[HANGOUT_JS]]"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular-sanitize.js"></script>

    <script src="[[BASE_PATH]]js/modules.js"></script>
    <script src="[[BASE_PATH]]js/filters.js"></script>
    <script src="[[BASE_PATH]]js/controllers/app-controller.js"></script>
    <script src="[[BASE_PATH]]js/directives/die-container.js"></script>
    <script src="[[BASE_PATH]]js/directives/message-display.js"></script>
    <script src="[[BASE_PATH]]js/services/dice-service.js"></script>
    <script src="[[BASE_PATH]]js/services/message-service.js"></script>
    <script src="[[BASE_PATH]]js/services/setting-service.js"></script>

    <script src="[[BASE_PATH]]js/utilities.js"></script>

    <!-- Angular Templates -->

    <!-- Template for display of dice controls -->
    <script type="text/ng-template" id="die-container.html">
        <div class="die-container">
            <img ng-src="[[BASE_PATH]]images/{{color}}.png" class="die-button" id="roll{{color}}" alt="{{color}} die" 
                 ng-click="clearQty()" ng-if="color!='Numeric'" />
            <input type="text" class="numeric-die-type" ng-model="numericDieType" ng-if="color=='Numeric'" />
            <span class="qty-text-box">{{quantity}}</span>
            <div class="arrow-container">
                <img class="arrow-up" src="[[BASE_PATH]]images/arrow-up.png" alt="{{color}} +1" ng-click="changeQty(1)" />
                <img class="arrow-down" src="[[BASE_PATH]]images/arrow-down.png" alt="{{color}} -1" ng-click="changeQty(-1)" />
            </div>
        </div>
    </script>

    <!-- Template for display of a message -->
    <script type="text/ng-template" id="message-display.html">
        <div class='row-wrapper'>
            <div class='image-wrapper'>
                <img class='person-image' ng-src='{{person.image.url}}' title='{{person.displayName}}' alt="{{person.displayName}}" />
            </div>
            <div class='results-wrapper' ng-if="message.type == 'roll'">
                <div class='dice-results'>
                    <img class='symbol' ng-src='[[BASE_PATH]]images/{{dieResult.die}}-{{dieResult.result}}.png'
                         alt="{{dieResult.die|dieName}} {{dieResult.result|dieResultSummary}}"
                         ng-if="dieResult.die != 'N'" ng-repeat="dieResult in message.data.diceResults" />
                    <span class="numeric-result" ng-repeat="dieResult in message.data.diceResults" ng-if="dieResult.die == 'N'">{{dieResult.result}}</span>
                </div>
                <div class='overall-results' title="{{message.data.overallResult|dieResultSummary}}">
                    <img class='symbol' ng-src='[[BASE_PATH]]images/{{symbols[result]}}' alt="{{result|symbolName}}" 
                         ng-repeat="result in message.data.overallResult track by $index" />
                </div>
            </div>
            <div class="results-wrapper" ng-if="message.type == 'html'" ng-bind-html="message.data.html">
            </div>
        </div>
    </script>

</head>

<body>
    <div id="container">
        <div id="header">
            <div id="headerInner">
                <div id="destinyTracker">
                    <div id="destinyTokenContainer">
                        <img ng-src='[[BASE_PATH]]images/destiny-{{destinyChar|destinyType}}.png' alt="Destiny {{destinyChar|destinyType}}" class='destiny-token' ng-click='toggleDestiny($index)'
                             ng-repeat="destinyChar in destiny track by $index" />
                        <div id="destinyWatermark" ng-show="!destiny">DESTINY</div>
                    </div>
                    <div id="destinyButtonContainer">
                        <input class="button" type="button" value="Add" id="addDestiny" ng-click="addDestiny()" />
                        <input class="button" type="button" value="Remove" id="removeDestiny" ng-click="removeDestiny()" />
                    </div>
                </div>
                <div id="buttonContainer">
                    <die-container color="Green" quantity="diceQuantities['Green']"></die-container>
                    <die-container color="Yellow" quantity="diceQuantities['Yellow']"></die-container>
                    <die-container color="Boost" quantity="diceQuantities['Boost']"></die-container>
                    <die-container color="Purple" quantity="diceQuantities['Purple']"></die-container>
                    <die-container color="Red" quantity="diceQuantities['Red']"></die-container>
                    <die-container color="Setback" quantity="diceQuantities['Setback']"></die-container>
                    <die-container color="Force" quantity="diceQuantities['Force']"></die-container>
                    <die-container color="Numeric" quantity="diceQuantities['Numeric']" numeric-die-type="numericDieType"></die-container>

                    <input class="button" type="button" value="ROLL!" id="roll" ng-click="roll()" />

                    <input class="checkbox" type="checkbox" id="resetAfterRoll" ng-model="resetAfterRoll" />
                    <label for="resetAfterRoll"><span></span>Reset after each roll</label>
                    <input class="button" type="button" value="Reset Dice" id="resetDiceQuantities" ng-click="resetDiceQuantities()" />
                </div>
            </div>
        </div>

        <div id="content-main" class="content" ng-hide="showSettings">
            <div id="outputArea" class="{{imageSize}}">
            </div>
        </div>

        <div id="content-settings" class="content" ng-show="showSettings">
            <div id="settings-container">
                <h1>Settings</h1>

                <span class="settings-label">Image Size</span>
                <select ng-model="imageSize"
                        ng-change="imageSizeChange()"
                        ng-options="value.id as value.label for value in imageSizeOptions"></select>
            </div>
        </div>

        <div id="footer">
            <div id="footer-inner">
                <input class="button" type="button" value="Clear Results" id="clearMessages" ng-click="clearMessages()" />

                <input class="button" type="button" value="Insert Break Line" id="insertBreak" ng-click="insertBreak()" />

                <img class="settings-button" src="[[BASE_PATH]]images/settings-blue.png" alt="Settings" ng-click="toggleSettingsDisplay()" />
            </div>
        </div>
    </div>
    <script src="[[BASE_PATH]]js/hangout-init.js"></script>
</body>
</html>  